<template>
  <!-- 查询提现列表 -->
  <div class="withdraw-container">

    <div class="no-data" v-if="withdrawList.length === 0">
      No
    </div>
    <ul class="withdraw-list">
      <li
        v-for="(item, i) of withdrawList"
        :key="i"
        class="item elevation-2"
        @click="onItemClicked(item)"
      >
        <div class="flexbox fill-width">
          <div class="flexitem">
            <div class="flexbox column">
              <div class="flexitem">Withdrawal</div>
              <div class="flexitem mt-2">{{ getTime(item.createTime) }}</div>
            </div>
          </div>
          <div class="flexitem flexbox align-center">
            <div class="flexitem amount">{{ item.amount }}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import { ReqProfitIncome } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
import Cookie from 'js-cookie'
declare const $Vue: Vue;

// 提现列表
@Component({
  components: {}
})
export default class WithdrawList extends Vue {
  private withdrawList: Array<any> = [
    // {
    //   createTime: "2019-12-03",
    //   amount: "+50"
    // }
  ];

  protected mounted() {
    $Vue.$emit("title", {
      message: "Withdrawals"
    });
    this.getMyBillList();
  }

  private getTime(date: string) {
    return getTime(date);
  }

  private onItemClicked(item: any) {
    this.$router.push({
      name: "WithdrawDetail",
      params: item
    });
  }

  private async getMyBillList() {
    const params: ReqProfitIncome = {
      limit: 1000,
      offset: 0,
      incomeType: 2,
      userId: Number(Cookie.get("buyer_userId")),
    };
    const { data } = await Api.getProfitIncomeList.r(params);
    console.log("getProfitIncomeList", data);

    if (data.result === 0) {
      this.withdrawList = data.data.dataList;
    } else {
      this.withdrawList = [];
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>
<style lang="less" scoped>
@import url(../../../../styles/variables.less);
.withdraw-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  .withdraw-list {
    width: 100%;
    .item {
      width: 100%;
      height: 4rem;
      margin-bottom: 0.4rem;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .mt-2 {
        margin-top: 0.8rem;
      }
      .amount {
        color: rgb(45, 182, 45);
        font-size: 1.2rem;
      }
    }
  }
}
</style>